<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="添加商品信息" center type="info" show-icon> </el-alert>
      <!-- 步骤条 -->
      <el-steps
        :active="Number(active) - 1"
        finish-status="success"
        space="200px"
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 标签页 -->
      =={{ active }}
      <el-tabs
        :tab-position="tabPosition"
        @tab-click="first"
        :before-leave="leaveTab"
        v-model="active"
      >
        <el-tab-pane label="基本信息" name="1">
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :rules="rules2"
            ref="ruleForm"
            :model="form"
          >
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="form.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="form.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="form.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="form.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                size="large"
                :options="options"
                v-model="form.goods_cat"
                @change="handleChange"
                placeholder="请选择"
                :props="{
                  expandTrigger: 'hover',
                  label: 'cat_name',
                  value: 'cat_id',
                }"
              ></el-cascader>
              <!-- {{ options[0] }} -->
              <!-- {{options[0].children}} -->
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="2">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性" name="3">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片" name="4">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="5">
          <quillEditor v-model="form.goods_introduce"></quillEditor>
          <el-button @click="add" type="primary">添加分类</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { regionData } from "element-china-area-data";
import { getCategoriesAPI } from '@/api/categories'
import { addGoodsAPI, getAttrsAPI } from '@/api/add'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  name: '',
  data () {
    return {
      active: '1',
      number: 1,
      tabPosition: 'left',
      labelPosition: 'top',
      msg: '',
      form: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: '',
        pics: [],
        goods_introduce: '',
        attrs: []
      },
      rules2: {
        goods_name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        goods_price: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          // { min: 5, max: 11, message: '长度在5到11个字符', trigger: ['blur', 'change'] }
        ],
        goods_weight: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        goods_number: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
      },
      options: [],
      cat_name: '',
      sel: 'many',
      code: '',
    }
  },
  created () {
    this.getCategories()
  },
  computed: {
  },
  methods: {
    handleChange (e) {
      console.log(e, "所选code值");
      this.code = e[2]
    },
    async getCategories () {
      const res = await getCategoriesAPI()
      this.options = res.data
      // console.log(this.options, 'options');
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    first () { },
    async leaveTab (activeName, oldActiveName) {
      console.log(activeName);
      console.log(oldActiveName);
      if (activeName != 1) {
        var flag = true
        this.$refs['ruleForm'].validate(valid => {
          if (!valid) {
            flag = false
            this.message.error('请先选择商品分类!')
          } else {
            flag = true
          }
        })
      }
      if (activeName == 2) {
        console.log(this.code);
        console.log(this.sel, 7777);
        const res = await getAttrsAPI(this.code, { sel: this.sel })
        console.log(res.data);
        this.form.attrs = res.data
      }
    },
    async add () {
      console.log(this.form);
      this.form.goods_cat = this.form.goods_cat.toString()
      const res = await addGoodsAPI(this.form)
      console.log(res, 'addGoods');
      this.$router.push('/goods')
    }
  }
}
</script>
<style lang='less'  scoped>
.quill-editor {
  ::v-deep .ql-editor {
    height: 300px;
  }
}
.el-button {
  margin-top: 15px;
}
.el-steps {
  margin: 20px 70px;
}
</style>
